<template>
    <div>
        <n-upload multiple directory-dnd :custom-request="upload" :max="5" @remove="rem">
            <n-upload-dragger>
                <div style="margin-bottom: 12px">
                    <n-icon size="48" :depth="3">
                        <ArchiveIcon />
                    </n-icon>
                </div>
                <n-text style="font-size: 16px">
                    点击或者拖动图片到该区域来上传
                </n-text>
            </n-upload-dragger>
        </n-upload>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { requestMethod } from '@/hooks/upLoad'
import { useMessage } from 'naive-ui'
const message = useMessage()
const uploadRet = ref()
const upLoadList = defineModel({
    type: Array,
    default: () => [],
});
const upload = async (e: any) => {
    uploadRet.value = await requestMethod(e)
    uploadRet.value.status == 'success' ?
        (upLoadList.value.push(uploadRet.value.data.url) && message.success(uploadRet.value.data.imgFile+"上传成功")) : message.error("上传失败")
}

const rem = (e: any) => {
    const needDel = e.index
    upLoadList.value.splice(needDel, 1)
}

</script>

<style scoped></style>